import React from "react";
import { Dialog, Text } from "react-native-elements";
import { LogBox, View } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";

export interface DialogPropsType {
  visible: boolean;
  type?: "success" | "error" | "warning" | "info";
  message: {
    title: string;
    content?: string;
  };
  onClose?: () => void;
  onConfirm?: () => void;
  onCancel?: () => void;
  showCancelButton?: boolean;
  children?: React.ReactNode;
}

LogBox.ignoreLogs([
  "Warning: Overlay: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.",
  "Warning: TextElement: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.",
  "Warning: DialogButton: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.",
  "Warning: Overlay: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead",
]);
/**  
    @author:  BelovedLYC
    @description: dialog组件
    @type {'success' | 'error' | 'primary'|"info"|"warning"}  - 提示类型标识
    @message {'title':string,'content':string}  - 提示信息内容
    @showCancel {'boolean'} - 是否显示取消按钮
    @onClose {'function'} - 关闭回调函数
    @onConfirm {'function'} - 确认回调函数
    @onCancel {'function'} - 取消回调函数
    @con {'function'} - 关闭回调函数
    @visible {'boolean'} - 是否显示
    @children {'React.ReactNode'} - 自定义内容
    //若未传入确认或者取消函数则请求传入onClose函数
    @example
    <StatusDialog
      visible={visible}
      type="success"
      message={{ title: "成功", content: "操作成功" }}
      showCancel={false}
      onClose={() => setVisible(false)}
      onConfirm={() => console.log("确认")}
      onCancel={() => console.log("取消")}  
    >
      <Text>自定义内容</Text>
*/
const StatusDialog: React.FC<DialogPropsType> = ({
  visible = false,
  type = "info",
  message,
  children,
  showCancelButton = false,
  onClose = () => {},
  onConfirm = () => {},
  onCancel = () => {},
}) => {
  const { colors } = useTheme();
  const DIALOG_CONFIG = {
    success: {
      icon: { color: colors.status.success },
      titleStyle: { color: colors.status.success, fontWeight: "bold" },
    },
    error: {
      icon: { color: colors.status.error },
      titleStyle: { color: colors.status.error, fontWeight: "bold" },
    },
    warning: {
      icon: { color: colors.status.warning },
      titleStyle: { color: colors.status.warning, fontWeight: "bold" },
    },
    info: {
      icon: { color: colors.primary },
      titleStyle: { color: colors.primary, fontWeight: "bold" },
    },
  } as const;
  const config = DIALOG_CONFIG[type] || DIALOG_CONFIG.info;

  return (
    <Dialog
      isVisible={visible}
      onBackdropPress={onClose}
      overlayStyle={{
        borderRadius: 10,
        width: "80%",
        minHeight: 100,
        position: "relative",
        backgroundColor: colors.background,
      }}
    >
      {/* 内容区域 */}
      <Dialog.Title
        title={message.title}
        titleStyle={[config.titleStyle, { marginBottom: 8 }]}
      />

      <Text
        style={{ marginVertical: 15, fontSize: 14, color: colors.text.primary }}
      >
        {message.content}
      </Text>
      {/* 渲染 children 或默认文本内容 */}
      {children || (
        <Text
          style={{
            marginVertical: 15,
            fontSize: 14,
            color: colors.text.primary,
          }}
        >
          {message.content}
        </Text>
      )}

      {/* 按钮定位容器 */}
      <View
        style={{
          flexDirection: "row",
          justifyContent: "flex-end",
          marginRight: 20,
        }}
      >
        {/* 取消按钮 */}
        {showCancelButton && (
          <Dialog.Actions>
            <Dialog.Button
              title="取消"
              onPress={onCancel}
              titleStyle={{
                color: colors.status.error,
                fontWeight: "500",
                marginRight: 30,
              }}
              buttonStyle={{
                backgroundColor: "transparent",
                paddingHorizontal: 12,
              }}
            />
          </Dialog.Actions>
        )}
        <Dialog.Actions>
          <Dialog.Button
            title="确认"
            onPress={onConfirm}
            titleStyle={{
              color: config.icon.color,
              fontWeight: "500",
              marginRight: 20, // 与弹窗边缘保持间距
            }}
            buttonStyle={{
              backgroundColor: "transparent",
              paddingHorizontal: 12,
            }}
          />
        </Dialog.Actions>
      </View>
    </Dialog>
  );
};

export default StatusDialog;
